<template>
    <div class="main-content">
        <Layout>
            <Sider ref="sider" v-model="showSider" hide-trigger :collapsible="true" :default-collapsed="showSider" :width="247" :collapsed-width="60">
                <Header class="main-header menu-header" :class="{'show-sider': !showSider}">
                    <router-link to="/index">   
                        <img src="static/images/logo.png" style="width: 206px;" alt="">
                    </router-link>
                </Header>
                <Content>
                    <main-menu ref="menu" :icon-menu="showSider" @on-select="toTop"></main-menu>
                </Content>
            </Sider>
            <Layout>
                <Header class="main-header">
                    <b-header :show-logo="false" :show-user="true" :show-menu="true" @menu-change="menuChange"></b-header>
                </Header>
                <Layout>
                <!-- <Content> -->
                    <div id="main-scroll-content" ref="content" class="content-container" :style="{overflow: $store.getters.stepIndex !== '' ? 'hidden' : 'auto'}">
                        <router-view></router-view>
                        <b-footer :isLogin="false" :isMain='true'></b-footer>
                        <to-scroll-top area-id="main-scroll-content"></to-scroll-top>
                    </div>
                <!-- </Content> -->
                </Layout>
            </Layout>
        </Layout>
        <guidance v-if="$store.getters.stepIndex !== ''" @open-menu="openMenu"></guidance>
    </div>
    <!-- <div class="main-content">
        <Layout class="main-layout">
            <Header class="main-header">
                <b-header :show-user="true" :is-main="true"></b-header>
            </Header>
            <Layout>
                <Sider ref="sider" v-model="showSider" hide-trigger collapsible :width="247" :collapsed-width="60">
                    <main-menu></main-menu>
                </Sider>
                <Layout>
                    <Content>
                        <router-view></router-view>
                        <b-footer :isLogin="false" :isMain='true'></b-footer>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
        <guidance></guidance>
    </div> -->
</template>
<script>
    import MainMenu from './MainMenu';  //菜单
    import BHeader from 'components/BHeader';  //页头
    import BFooter from 'components/BFooter';  //页脚
    import guidance from 'components/main/guidance';
    import ToScrollTop from 'components/commons/ToScrollTop';
    export default {
        components: { MainMenu, BHeader, BFooter, guidance, ToScrollTop },
        data(){
            return {
                showSider: this.$utils.Storage.getObj('IS_OPEN_MENU'),   //判断是否收起侧边栏
            }
        },
        mounted(){
            this.init();
        },
        methods: {
            init(){
                if(!this.$utils.Storage.getObj('CLOSE_GUIDANCE')) this.$store.commit('stepIndex', '1');
                // this.showSider = this.$utils.Storage.getObj('IS_OPEN_MENU');
                // console.log(this.showSider)
            },
            // 侧边菜单状态变化 图标菜单 <==> 文字菜单
            menuChange(){
                this.$refs.sider.toggleCollapse();
                // console.log(this.showSider)
                this.showSider ? this.$utils.Storage.setObj('IS_OPEN_MENU', this.showSider) : this.$utils.Storage.remove('IS_OPEN_MENU');
            },
            // 回到顶部
            toTop(){
                this.$refs.content.scrollTop = 0;
            },
            openMenu(name){
                this.$refs.menu.openMenu(name);
            }
        }
    }
</script>

<style lang="less">
    .main-content{
        position: absolute;
        width: 100%;
        height: 100%;
        min-width: @min-width;
        background: @color-Background;
        // overflow: hidden;
        
        >.ivu-layout{
            height: 100%;
            .ivu-layout{
                flex-grow: 1;
                overflow: hidden;
                position: relative;
                .content-container{
                    overflow: auto;
                    height: 100%;
                }
            }
        }
        
        .main-header{
            padding: 0;
            height: @header-height;
            line-height: @header-height;
            .b-header{
                height: @header-height;
                line-height: @header-height;
                padding: 0 20px;
                .b-header-bg{
                    max-width: 100%;
                }
            }
            &.menu-header{
                border-bottom: 1px solid @color-Border;
                border-right: 1px solid @color-Border;
                box-sizing: border-box;
                padding: 0 13px;
                overflow: hidden;
                transition: all linear 0.2s;
                &.show-sider{
                    padding: 0 20px;
                }
                img{
                    vertical-align: middle;
                    width: 100%;
                }
            }
        }
        .b-footer{
            padding: 0 30px;
        }
    }
</style>
